{% extends "adminmain.html" %}

{% block title %}交易管理{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/admin_main.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/admin_trade.css') }}">
{% endblock %}

{% block content %}
<div class="dashboard-container">
    <!-- 面包屑导航 -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ url_for('admin.adminmain') }}">首页</a></li>
            <li class="breadcrumb-item active" aria-current="page">交易管理</li>
        </ol>
    </nav>
    
    <!-- 交易管理卡片 -->
    <div class="dashboard-card">
        <div class="card-header">
            <h2><i class="bi bi-currency-exchange me-2"></i>交易管理</h2>
            <div class="card-actions">
                <button class="btn btn-success" id="addTradeBtn">
                    <i class="bi bi-plus-circle me-1"></i>添加交易
                </button>
                <form method="POST" action="{{ url_for('admintrade.admintrade') }}" style="display:inline;">
                    <input type="hidden" name="action" value="export_csv">
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-file-earmark-arrow-down me-1"></i>导出CSV
                    </button>
                </form>
            </div>
        </div>

        <!-- 搜索区域 -->
        <div class="search-section mb-4">
            <div class="row g-3">
                <div class="col-md-4">
                    <input type="text" class="form-control" placeholder="输入卡号"
                           id="cardIDSearch" value="{{ cardIDSearch }}">
                </div>
                <div class="col-md-4">
                    <select class="form-select" id="tradeTypeSearch">
                        <option value="">所有类型</option>
                        <option value="存款" {% if tradeTypeSearch == '存款' %}selected{% endif %}>存款</option>
                        <option value="取款" {% if tradeTypeSearch == '取款' %}selected{% endif %}>取款</option>
                        <option value="转账" {% if tradeTypeSearch == '转账' %}selected{% endif %}>转账</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <input type="date" class="form-control" id="tradeDateSearch" value="{{ tradeDateSearch }}">
                </div>
                <div class="col-md-12">
                    <button class="btn btn-primary w-100" id="searchBtn">
                        <i class="bi bi-search me-1"></i>搜索交易
                    </button>
                </div>
            </div>
        </div>

        <!-- 交易表格 -->
        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>交易ID</th>
                        <th>卡号</th>
                        <th>交易时间</th>
                        <th>交易类型</th>
                        <th>交易金额</th>
                        <th>备注</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for trade in trades.items %}
                    <tr>
                        <td>{{ trade.tradeID }}</td>
                        <td>{{ trade.cardID }}</td>
                        <td>{{ trade.tradeDate.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                        <td>{{ trade.tradeType }}</td>
                        <td>{{ trade.tradeMoney }}</td>
                        <td>{{ trade.remark or '-' }}</td>
                        <td>
                            <button class="btn btn-sm btn-danger delete-btn"
                                    data-id="{{ trade.tradeID }}"
                                    data-card="{{ trade.cardID }}"
                                    data-type="{{ trade.tradeType }}"
                                    data-money="{{ trade.tradeMoney }}">
                                <i class="bi bi-trash"></i> 删除
                            </button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- 分页控件 -->
        <nav class="mt-4">
            <ul class="pagination justify-content-center">
                {% if trades.has_prev %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('admintrade.admintrade',
                        page=trades.prev_num,
                        cardIDSearch=cardIDSearch,
                        tradeTypeSearch=tradeTypeSearch,
                        tradeDateSearch=tradeDateSearch) }}">上一页</a>
                </li>
                {% else %}
                <li class="page-item disabled">
                    <a class="page-link" href="#">上一页</a>
                </li>
                {% endif %}

                {% for page_num in trades.iter_pages(left_edge=1, right_edge=1, left_current=1, right_current=2) %}
                    {% if page_num %}
                        <li class="page-item {% if page_num == trades.page %}active{% endif %}">
                            <a class="page-link" href="{{ url_for('admintrade.admintrade',
                                page=page_num,
                                cardIDSearch=cardIDSearch,
                                tradeTypeSearch=tradeTypeSearch,
                                tradeDateSearch=tradeDateSearch) }}">{{ page_num }}</a>
                        </li>
                    {% else %}
                        <li class="page-item disabled"><span class="page-link">...</span></li>
                    {% endif %}
                {% endfor %}

                {% if trades.has_next %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('admintrade.admintrade',
                        page=trades.next_num,
                        cardIDSearch=cardIDSearch,
                        tradeTypeSearch=tradeTypeSearch,
                        tradeDateSearch=tradeDateSearch) }}">下一页</a>
                </li>
                {% else %}
                <li class="page-item disabled">
                    <a class="page-link" href="#">下一页</a>
                </li>
                {% endif %}
            </ul>
        </nav>
    </div>
</div>

<!-- 添加交易模态框 -->
<div class="modal fade" id="tradeModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加交易</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ url_for('admintrade.admintrade') }}">
                <div class="modal-body">
                    <input type="hidden" name="action" id="formAction" value="add">

                    <div class="mb-3">
                        <label class="form-label">交易类型 <span class="text-danger">*</span></label>
                        <select class="form-select" id="tradeType" name="tradeType" required>
                            <option value="">请选择交易类型</option>
                            <option value="存款">存款</option>
                            <option value="取款">取款</option>
                            <option value="转账">转账</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">银行卡号 <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="cardID" name="cardID" required>
                    </div>

                    <div class="mb-3" id="targetCardGroup" style="display:none;">
                        <label class="form-label">目标银行卡号 <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="targetCardID" name="targetCardID">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">交易金额 <span class="text-danger">*</span></label>
                        <input type="number" class="form-control" id="tradeMoney" name="tradeMoney" min="0.01" step="0.01" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">备注</label>
                        <textarea class="form-control" id="remark" name="remark" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 删除确认模态框 -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">确认删除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ url_for('admintrade.admintrade') }}">
                <input type="hidden" name="action" value="delete">
                <input type="hidden" name="tradeID" id="deleteTradeID">
                <div class="modal-body">
                    <p>确定要删除交易ID为"<span id="deleteTradeIDValue" class="fw-bold"></span>"的交易吗？</p>
                    <p class="text-danger">此操作不可逆，请谨慎操作！</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-danger">确认删除</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/admin_main.js') }}"></script>
<script src="{{ url_for('static', filename='js/admin_trade.js') }}"></script>
{% endblock %}